<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col
                :span="6"
                :xs="24"
            >
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix"
                    >
                        <span>个人信息</span>
                    </div>
                    <div>
                        <div class="text-center">
                            <userAvatar :user="user" />
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <i class="el-icon-user-solid"></i>用户姓名
                                <div class="pull-right">{{ user.nickName}}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-mobile-phone"></i>手机号码
                                <div class="pull-right">{{ user.phonenumber }}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-message"></i>用户邮箱
                                <div class="pull-right">{{ user.email }}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-connection"></i>所属机构
                                <div class="pull-right">{{ agency?agency.agencyName:'' }}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-user"></i>所属岗位
                                <div class="pull-right">{{ post?post.postName:'' }}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-position"></i>常住地址
                                <div class="pull-right">{{ user.address }}</div>
                            </li>
                            <li class="list-group-item">
                                <i class="el-icon-date"></i>创建日期
                                <div class="pull-right">{{dealTime(user.createTime)  }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col
                :span="18"
                :xs="24"
            >
                <el-card>
                    <div
                        slot="header"
                        class="clearfix"
                    >
                        <span>基本资料</span>
                    </div>
                    <el-tabs v-model="activeTab">
                        <el-tab-pane
                            label="基本资料"
                            name="userinfo"
                        >
                            <userInfo :user_data="user_data" @listenUpdate="updateUser" />
                        </el-tab-pane>
                        <el-tab-pane
                            label="修改密码"
                            name="resetPwd"
                        >
                            <resetPwd :user="user" />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
export default {
    name: "Profile",
    components: { userAvatar, userInfo, resetPwd },
    data() {
        return {
            user: {},
            agency:{},
            post:{},
            activeTab: "userinfo",
            user_data:{}
        }
    },
    created() {
        this.getUser();
    },
    methods: {
        getUser() {
            getUserProfile().then(res => {
                this.user = res.data.user;
                this.agency= res.data.agency;
                this.post = res.data.post;
                this.user_data = JSON.parse(JSON.stringify(res.data.user));
            })
        },
        updateUser(){
            this.getUser();
        }
    }
}
</script>
<style scoped>
.pull-right{
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>